<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>文章详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="__LAYUI__/css/layui.css">
    <style>
        .layui-card-header {
            line-height: normal !important;
            height: auto;
        }

        .article-title {
            margin-bottom: 10px;
            /* 为右侧标签留出空间 */
            position: relative;
        }

        .article-tags {
            position: absolute;
            right: 0;
            top: 0;
        }

        .article-stats {
            margin-bottom: 15px;
        }

        .author-container {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 15px;
        }

        .author-avatar {
            width: 40px;
            height: 40px;
        }

        .author-info {
            flex: 1;
        }

        .author-name {
            color: #01AAED;
        }

        .author-signature {
            color: #666;
            font-size: 12px;
            margin-top: 5px;
        }

        .publish-time {
            color: #666;
        }

        .image-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 15px;
        }

        .image-box {
            width: 120px;
            height: 120px;
            border: 2px dashed #ccc;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
            color: #ccc;
            cursor: pointer;
            position: relative;
        }

        .image-box img {
            max-width: 100%;
            max-height: 100%;
            object-fit: cover;
        }

        .image-box .delete-btn {
            position: absolute;
            top: 0;
            right: 0;
            background-color: red;
            color: white;
            border: none;
            padding: 2px 6px;
            cursor: pointer;
            display: none;
            z-index: 1;
        }

        .article-category {
            margin-top: 20px;
            display: inline-block;
        }

        .article-hidden {
            margin-top: 20px;
        }

        /* 响应式布局优化 */
        @media screen and (max-width: 768px) {
            .author-container {
                flex-direction: column;
                align-items: flex-start;
            }

            .publish-time {
                margin-top: 10px;
            }
        }
    </style>
</head>

<body>
    <div class="layui-container" style="padding: 15px;">
        <div class="layui-card">
            <!-- 文章标题和标签 -->
            <div class="layui-card-header">
                <div class="article-title">
                    <h1>{$data.title}</h1>
                    <div class="layui-btn-group article-tags">
                        {if $data.is_hot}
                        <button class="layui-btn layui-btn-xs layui-btn-danger">热门</button>
                        {/if}
                        {if $data.is_top}
                        <button class="layui-btn layui-btn-xs layui-btn-warm">置顶</button>
                        {/if}
                    </div>
                </div>
                <!-- 文章统计信息 -->
                <div class="layui-text article-stats">
                    <span class="layui-badge layui-bg-gray">
                        <i class="layui-icon layui-icon-eye"></i> {$data.heat}
                    </span>
                    <span class="layui-badge layui-bg-gray" style="margin-left: 10px;">
                        <i class="layui-icon layui-icon-dialogue"></i> {$data.comment}
                    </span>
                </div>
            </div>

            <!-- 作者信息区域 -->
            <div class="layui-card-header author-container">
                <!-- 左侧作者头像 -->
                <img src="{$data.userInfo.avator}" class="layui-circle author-avatar">
                <!-- 右侧作者信息 -->
                <div class="author-info">
                    <div>
                        <span class="author-name">{$data.userInfo.nickname|default='用户已注销'}</span>
                    </div>
                    <!-- 用户签名 -->
                    <div class="author-signature">
                        {$data.userInfo.signature|default='这个人很懒，什么都没有留下。'}
                    </div>
                </div>
                <!-- 发布时间 -->
                <div class="layui-text publish-time">
                    发布时间：{$data.create_time}
                </div>
            </div>

            <!-- 文章内容 -->
            <div class="layui-card-body">
                <div class="layui-text">
                    {$data.content}
                </div>
                <!-- 文章图片 -->
                <div class="image-container">
                    <!-- 图片1 -->
                    {if @$data.images[0] != ''}
                    <div class="image-box" data-index="0">
                        <img src="{$data.images[0]}" alt="图片1" class="article-image">
                    </div>
                    {/if}
                    {if @$data.images[1] != ''}
                    <!-- 图片2 -->
                    <div class="image-box" data-index="1">
                        <img src="{$data.images[1]}" alt="图片2" class="article-image">
                    </div>
                    {/if}
                    <!-- 图片3 -->
                    {if @$data.images[2] != ''}
                    <div class="image-box" data-index="2">
                        <img src="{$data.images[2]}" alt="图片3" class="article-image">
                    </div>
                    {/if}
                </div>

                <!-- 分类 -->
                <span class="layui-badge layui-bg-blue article-category"># {$data.category.cate_name ?: '分类已删除'}</span>

                <!-- 隐藏内容 -->
                <div class="layui-elem-quote article-hidden">
                    文章类型: {if $data.type == 1}普通{elseif $data.type==2}积分{else/}回复{/if}模式<br>
                    隐藏内容: {$data.hide_content}
                </div>
            </div>
        </div>
    </div>

    <script src="__LAYUI__/layui.js"></script>
    <script>
        layui.use(['layer', 'form', 'util'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var util = layui.util;

            // 图片预览功能
            var $articleImages = document.querySelectorAll('.article-image');
            var images = [];

            // 收集所有图片URL
            $articleImages.forEach(function (img) {
                images.push({
                    src: img.src,
                    alt: img.alt
                });
            });

            // 为每张图片绑定点击事件
            $articleImages.forEach(function (img, index) {
                img.onclick = function () {
                    // 使用layer.photos进行图片预览
                    layer.photos({
                        photos: {
                            "title": "文章图片预览",
                            "id": "article-images",
                            "start": index,
                            "data": images
                        },
                        anim: 5 // 缩放动画效果
                    });
                };
            });

            // 图片框悬停效果
            var $imageBoxes = document.querySelectorAll('.image-box');
            $imageBoxes.forEach(function (box) {
                box.onmouseover = function () {
                    var deleteBtn = this.querySelector('.delete-btn');
                    if (deleteBtn) {
                        deleteBtn.style.display = 'block';
                    }
                };

                box.onmouseout = function () {
                    var deleteBtn = this.querySelector('.delete-btn');
                    if (deleteBtn) {
                        deleteBtn.style.display = 'none';
                    }
                };
            });
        });
    </script>
</body>

</html>